<template>
  <div>
    <div class="LineBox">
      <div class="day" title="点击切换显示方式">
        <b @click="Tab(0)" :class="{ Day }">日</b>
        <b @click="Tab(1)" :class="{ Month }">月</b>
      </div>
      <div class="Line" ref="Line" ></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    Time: {
      type: Array,
      default: []
    },
    
    Data: {
      type: Array,
      default: []
    },
    Day: {
      type: Boolean
    },
    Month: {
      type: Boolean
    },
    chartsH: {
      type: String,
      default: "301px"
    },
    names:{
       type: String,
       default: "数值"
    }
  },
  watch: {
    Time() {
      this.line();
    },
    
    Data(a) {
      this.line();
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.line();
  },
  methods: {
    Tab(e) {
      this.$emit("Tab", e);
    },
    line() {
      var myChart = echarts.init(this.$refs.Line);
      myChart.setOption({
        title: {
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br> {a} : {c}"
        },
        legend: {
          left: "5%",
          top: "13%",
          data: [this.names],
          textStyle: {
            color: "#fff", //更改坐标轴文字颜色
            fontSize: 14 //更改坐标轴文字大小
          }
        },
        xAxis: {
          type: "category",
          name: this.Day ? "时间" : "日期",
          splitLine: { show: false },
          nameGap: 25,
          data:this.Time,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff", //更改坐标轴文字颜色
              fontSize: 10, //更改坐标轴文字大小
              interval: 15
            }
          },
          axisLine: {
            lineStyle: {
              color: "#00a0e9", //更改坐标轴颜色
              width: 3
            }
          }
        },
        grid: {
          left: "7%",
          right: "12%",
          bottom: "3%",
          top: "23%",
          containLabel: true
        },
        yAxis: [
          {
            type: "value",
            name: "PM",
            splitLine: {
              lineStyle: {
                type: "dotted",
                color: "#07222e" //更改坐标轴颜色
              }
            },
            axisLabel: {
              show: true,
              formatter: "{value}",
              textStyle: {
                color: "#fff", //更改坐标轴文字颜色
                fontSize: 10 //更改坐标轴文字大小
              }
            },
            axisLine: {
              lineStyle: {
                color: "#000" //更改坐标轴颜色
              }
            }
          }
        ],
        series: [
          {
            name: this.names,
            type: "line",
            symbol: "circle", //设定为实心点\
            smooth: "none",
            symbolSize: 3,
            yAxisIndex: "0",
            data: this.Data,
            color: "#5e9df3",
            lineStyle: {
              normal: {
                color: "#5e9df3"
              }
            },
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(80,141,255,0.39)"
                  },
                  {
                    offset: 0.34,
                    color: "rgba(56,155,255,0.25)"
                  },
                  {
                    offset: 1,
                    color: "rgba(38,197,254,0.00)"
                  }
                ])
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
@import url("../../assets/css/day.css");
.LineBox {
  width: 445px;
  height: 301px;
  position: relative;
}
.Line {
  height: 301px;
}
</style>
